<template>
	<div class="sports">
		<header-top></header-top>
		<div class="banner">
			<img src="../../../assets/img/sporttop.jpg">
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
			<el-tab-pane :label="item" :name="item" v-for="(item, index) in displacements" :key="index">
				<displacement :title="activeName"></displacement>
			</el-tab-pane>
		</el-tabs>
		<foot></foot>
	</div>
</template>

<script>
	import headerTop from '@/components/headNav/index.vue'
	import displacement from '@/components/displacement/index.vue'
	import foot from '@/components/footer/foot.vue'

	export default {
		components: {
			headerTop,
			displacement,
			foot
		},
		data() {
			return {
				activeName: '150cc',
				displacements: [
					'150cc',
					'250cc',
					'300cc',
					'350cc',
					'400cc',
					'600cc',
					'1000cc'
				]
			}
		},
		methods: {
			handleClick(tab) {
				this.activeName = tab.name
			}
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;

		img {
			width: 100%;
		}
	}
	.el-tabs {
		width: 90%;
		margin: 0 auto;
	}
</style>
